<form [formGroup]="form">
  <button mat-mini-fab color="warn" type="button" (click)="addUnit()">
    <mat-icon>add box</mat-icon>
  </button>

  <div class="group-list" *ngIf="formData">
    <div class="personas" formArrayName="personas" *ngFor="let unit of formData.controls; let i=index">
      <div [formGroupName]="i" class="group-item">
        <button type="button" mat-mini-fab color="warn"
                *ngIf="formData.controls.length > 1"
                (click)="removeUnit(i)">
          删除
        </button>

        <mat-form-field>
          <input matInput placeholder="用户名" formControlName="name" required>
        </mat-form-field>

        <mat-form-field>
          <input matInput placeholder="头像" formControlName="avatar" required>
        </mat-form-field>

        <mat-form-field>
          <textarea matInput
                    cdkTextareaAutosize
                    #autosize="cdkTextareaAutosize"
                    cdkAutosizeMinRows="1"
                    cdkAutosizeMaxRows="5" placeholder="资料" formControlName="profiles" required></textarea>
        </mat-form-field>

        <mat-form-field>
          <textarea matInput
                    cdkTextareaAutosize
                    #autosize="cdkTextareaAutosize"
                    cdkAutosizeMinRows="1"
                    placeholder="行为" formControlName="behaviors" required></textarea>
        </mat-form-field>

        <mat-form-field>
          <textarea matInput
                    cdkTextareaAutosize
                    #autosize="cdkTextareaAutosize"
                    cdkAutosizeMinRows="1" placeholder="需要" formControlName="needs" required></textarea>
        </mat-form-field>
      </div>
    </div>
  </div>
</form>


<div>
  <button mat-button matStepperPrevious>Back</button>
  <button mat-button matStepperNext (click)="submitPersonasForm()">Next</button>
</div>
